<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/11/22 0022
  Time: 10:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录界面</title>
    <style>
        #mydiv {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -50px;
        }

        #u1 {
            z-index: 2;
            color: #fff;
            position: absolute;
            right: 0;
            top: 0;
            margin: 19px 0 5px;
            padding: 0 96px 0 0;
        }

        #ftCon {
            height: 50px;
            position: absolute;
            bottom: 47px;
            text-align: left;
            width: 100%;
            z-index: 0;
            overflow: hidden;
            margin-left: 40%;
            margin-top: -200px;
        }

        .mouseOver {
            background: #708090;
            color: #FFFAFA;
        }

        .mouseOut {
            background: #FFFAFA;
            color: #000000;
        }

    </style>
    <script type="text/javascript">
        var xmlHttp;

        /*获得用户关联信息的函数*/
        function getMoreContents() {
            /*首先获得用户的输入*/
            var content = document.getElementById("keyword");
            if (content.value == "") {
                clearContent();
                return;
            }
            // alert(content.value);
            /*给服务器发送用户输入的内容，采用ajax异步发送数据，所以使用一个对象，xmlhttp对象*/
            xmlHttp = createXMLHttp();
            //给服务器发送数据
            var url = "search?keyword=" + escape(content.value);

            //和服务器建立连接
            xmlHttp.open("GET", url, true);//true表示javascript脚本会在send()方法继续执行，而不会等待来自服务器的响应
            //服务器的响应，xmlHttp绑定回调方法，这个回调方法会在xmlHttp状态改变的时候被调用
            // xmlHttp的状态0-4，我们只关心4(complete)这个状态，所以当完成之后，调用回调方法才有意义
            xmlHttp.onreadystatechange = callBack;
            xmlHttp.send(null);
        }

        //获得Xmlhttp对象
        function createXMLHttp() {
            //对于大多数的浏览器都适用
            var xmlHttp;
            if (window.XMLHttpRequest) {
                xmlHttp = new XMLHttpRequest();
            }
            //要考虑浏览器的兼容性问题
            if (window.ActiveXObject) {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                if (!xmlHttp) {
                    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                }
            }
            return xmlHttp;
        }

        //回调函数
        function callBack() {
            //4代表完成
            if (xmlHttp.readyState == 4) {
                console.log(xmlHttp.readyState);
                if (xmlHttp.status == 200) {//200服务器的响应状态值，404资源未找到，500代表服务器内部错误
                    //交互成功，获得响应的数据，是文本格式
                    var result = xmlHttp.responseText;
                    //解析获得数据
                    var json = eval("(" + result + ")");
                    //获取数据之后，就可以动态的显示这些数据，把这些数据展示到输入框的下面
                    // alert(json);
                    setContent(json);
                }
            }
        }

        //显示界面,设置关联数据的展示，参数代表的是服务器传递过来的关联数据
        function setContent(contents) {
            clearContent();
            //首先获得关联数据的长度，依次来确定生成多少<tr></tr>
            setLocation();
            var size = contents.length;
            //设置内容
            for (var i = 0; i < size; i++) {
                var nextNode = contents[i];//代表的是json格式数据的第i个元素
                var tr = document.createElement("tr");
                var td = document.createElement("td");
                td.setAttribute("border", "0");
                td.setAttribute("bgcolor", "#FFFAFA");
                td.onmouseover = function () {
                    this.className = 'mouseOver';
                };//鼠标放上去
                td.onmouseout = function () {
                    this.className = 'mouseOut'
                };//鼠标离开

                td.onclick = function () {
                    //当用鼠标选择一个关联的数据时，关联数据自动设置为输入框的值
                };
                var text = document.createTextNode(nextNode);
                td.appendChild(text);
                tr.appendChild(td);
                document.getElementById("content_table_body").appendChild(tr);
            }
        }

        //清空之前的数据
        function clearContent() {
            var contentTableBody = document.getElementById("content_table_body");
            var size = contentTableBody.childNodes.length;
            for (var i = size - 1; i >= 0; i--) {
                contentTableBody.removeChild(contentTableBody.childNodes[i]);//指定删除某一个子节点
            }
            document.getElementById("popDiv").style.border="none";
        }

        //当输入框失去焦点的时候,关联信息清空
        function keywordBlur() {
            clearContent();
        }
        //设置显示关联信息的位置
        function setLocation() {
            //关联信息的显示位置要和输入框一致
            var content=document.getElementById("keyword");
            var width=content.offsetWidth;//输入框的宽度
            var left=content["offsetLeft"];//到左边框的距离
            var top=content["offsetTop"]+content.offsetHeight;//输入框距离顶部的高度+输入框的高度
                //获得显示数据的div
            var popDiv=document.getElementById("popDiv");
            popDiv.style.border="block 1px solid";
            popDiv.style.left=left+"px";
            popDiv.style.top=top+"px";
            popDiv.style.width=width+"px";
            document.getElementById("content_table").style.width=width+"px";
        }
    </script>
</head>
<body>
<div id="u1">
    <a href="javascript:void(0)">新闻</a>
    <a href="javascript:void(0)">hao123</a>
    <a href="javascript:void(0)">地图</a>
    <a href="javascript:void(0)">视频</a>
    <a href="javascript:void(0)">贴吧</a>
    <a href="javascript:void(0)">学术</a>
    <a href="javascript:void(0)">登录</a>
    <a href="javascript:void(0)">设置</a>
    <a href="javascript:void(0)">更多产品</a>
</div>
<div id="mydiv">
    <%--输入框--%>
    <input type="text" id="keyword" size="50" onkeyup="getMoreContents()"
           onblur="keywordBlur()" onfocus="getMoreContents()"/>
    <input type="button" value="百度一下" width="50px"/>
    <%--下面是内容展示的区域--%>
    <div id="popDiv">
        <table id="content_table" bgcolor="#FFFAFA" border="0" cellspacing="0" cellpadding="0">
            <tbody id="content_table_body">
            <%--动态查询出来的数据显示在这里--%>
            </tbody>
        </table>
    </div>
</div>
<div id="ftCon">
    <a href="javascript:void(0)">百度设为主页</a>
    <a href="javascript:void(0)">关于百度</a>
    <a href="javascript:void(0)">about baidu</a>
    <a href="javascript:void(0)">百度推广</a>
</div>
</body>
</html>
